<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- 
            1.Vue模板语法有两类：插值语法和指令语法
            2.插值语法：用于解析标签体内容
            3.指令语法：用于解析标签内容
         -->
         <div id="root">
             <h1>插值语法</h1>
             <h3>你好，{{name}}</h3>
             <hr/>
             <h1>指令语法</h1>
             <a v-bind:href="study.url">点我进入{{study.name}}学习</a>
             <a :href="study.url">点我进入{{study.name}}学习</a>
         </div>
        <script>
            Vue.config.productionTip = false;
            new Vue({
                el:"#root",
                data:{
                     name: "打工人",
                    study: {
                        name: "百度",
                        url: "https://www.baidu.com"
                    }
                }
            })
        </script>
    </body>
</html>